<template exportIn>
  <a-modal width="556px" title="导入投放" :visible="value" :maskClosable="false" :footer="false" @cancel="onCancel">
    <a-spin tip="加载中..." :spinning="isLoading">
      <div class="download-box">
        <p class="download-box-remind">1.下载导入模版，根据模版提示完善内容</p>
        <a-button icon="cloud-download" class="border-radious-2" @click="handleDownloadTemplate">下载模版</a-button>
      </div>
      <!-- <div class="upload-box">
        <div class="flex upload-btn-box">
          <a-upload name="file" accept=".xls,.xlsx" :action="actionUrl" :data="{ douApplyId: douApplyId }" class="upload-btn" :headers="headers" @change="handleChange" :showUploadList="false">
            上传文件
          </a-upload>
          <p class="upload-remind-text">支持批量上传，上传格式为Excel文件</p>
        </div>
        <a-upload-dragger name="file" :multiple="true" accept=".xls,.xlsx" :data="{ douApplyId: douApplyId }" :action="actionUrl" @change="handleChange">
          <p class="ant-upload-drag-icon">
            <a-icon type="cloud-upload" :style="{ fontSize: '40px' }" />
          </p>
          <p class="dragger-text">
            将文件拖到此处或点击此处上传
          </p>
        </a-upload-dragger>
      </div> -->
      <div class="upload-box">
        <t-upload
          v-if="showUpload"
          v-model="files"
          accept=".xls,.xlsx"
          :data="{ douApplyId: douApplyId }"
          :action="actionUrl"
          :placeholder="`支持批量上传，上传格式为Excel文件`"
          theme="file-flow"
          multiple
          :headers="headers"
          :auto-upload="true"
          :max="99"
          :tips="uploadTips"
          :sizeLimit="{ size: 99, unit: 'MB', message: '文件大小不能超过5MB' }"
          :onRemove="removeFiles"
          @select-change="handleSelectChange"
          :format-response="formatResponse"
          :requestMethod="requestMethod"
          @fail="handleFail"
        >
        </t-upload>
      </div>
    </a-spin>
  </a-modal>
</template>
<script>
import { djDownloadUrl, uploadup } from '@/service/djService'
import { BASE_URL } from '@/util'
import { getToken } from '@/util/method'
import { MessagePlugin as Message, tUpload as TUpload } from 'tdesign-vue' // 组件的引入可以省略
import { http } from '@/util'
export default {
  name: 'exportIn',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    douApplyId: {
      type: Number | String,
      default: 0
    }
  },
  watch: {
    files(value) {
      console.log(value)
    },
    value(value) {
      console.log(value)
      if (value) {
        this.showUpload = true
      }
    }
  },

  data() {
    return {
      headers: {
        Authorization: getToken()
      },
      showUpload: false,
      files: [],
      uploadTips: '',
      // 加载loading
      isLoading: false,
      postData: { douApplyId: this.douApplyId },
      // 上传
      actionUrl: BASE_URL + '/anchor/platform/manager/dj/expense/put/batch'
    }
  },
  methods: {
    handleFail(e) {
      console.log(e)
    },
    requestMethod(file /** UploadFile */) {
      console.log(file, file.raw)
      let formdata = new FormData()
      formdata.append('douApplyId', this.douApplyId)
      formdata.append('file', file.raw) // 将每一个文件图片都加进formdata
      return new Promise((resolve) => {
        http
          .post(this.actionUrl, formdata)
          .then((res) => {
            console.log(res)
            this.uploadTips = ''
            // file.percent 用于控制上传进度，如果不希望显示上传进度，则不对 file.percent 设置值即可。
            // 如果代码规范不能设置 file.percent，也可以设置 this.files
            file.percent = 0
            const timer = setTimeout(() => {
              // resolve 参数为关键代码
              resolve({ status: 'success', response: res })
              file.percent = 100
              clearTimeout(timer)
            }, 500)
          })
          .finally(() => {
            this.$emit('callback')
            // this.onCancel()
          })
          .catch((err) => {
            this.uploadTips = err || ''
            resolve({ status: 'fail', error: err })
          })
      })
    },
    removeFiles(e) {
      this.uploadTips = ''
    },
    onCancel() {
      this.$emit('input', false)
      this.files = []
      this.uploadTips = ''
      this.isLoading = false
      this.showUpload = false
    },
    handleSelectChange(files) {
      // this.files = files
      console.log(files, this.files)
    },
    onCancelUpload() {
      console.log()
      this.files = []
    },
    // 下载模版
    async handleDownloadTemplate() {
      let res = await djDownloadUrl()
      window.location.href = res
    },
    submitApply() {},
    handleChange(info) {
      const status = info.file.status
      if (status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (status === 'done') {
        this.$messageSend.success(`${info.file.name} file  uploaded successfully.`)
      } else if (status === 'error') {
        this.$messageSend.error(`${info.file.name} file upload failed.`)
      }
    },
    // 用于格式化接口响应值，error 会被用于上传失败的提示文字；url 表示文件/图片地址
    // error 为真时，组件会判定为上传失败
    formatResponse(res) {
      console.log(res)
      const { code, message, errMessage = '' } = res || {}
      if (code !== 200) {
        return { error: message || errMessage || '' }
      }
      // return { ...res, url: res.url }
    }
  }
}
</script>
<style scoped lang="scss">
/deep/ .ant-modal-header {
  border-bottom: 1px solid transparent !important;
}
/deep/ .ant-modal-body {
  padding-top: 0;
}
/deep/ .ant-modal-footer {
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.02), inset 0px -1px 0px 0px #f5f5f5;
}
/deep/ .ant-form-item {
  margin-bottom: 18px;
}
.flex {
  display: flex;
}
.download-box {
  background: #f5f7fc;
  border-radius: 4px;
  padding: 20px 16px;
  margin-bottom: 19px;
  &-remind {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    margin-bottom: 8px;
  }
}
.upload-box {
  background: #f5f7fc;
  border-radius: 4px;
  padding: 12px 16px;
  .upload-btn-box {
    align-items: center;
    margin-bottom: 10px;
    .upload-btn {
      background: #ffffff;
      border-radius: 2px;
      border: 1px solid rgba(0, 0, 0, 0.12);
      font-size: 14px;
      color: #333333;
      padding: 5px 16px;
      cursor: pointer;
    }
    .upload-remind-text {
      font-size: 12px;
      font-weight: 400;
      color: #999999;
      margin-left: 7px;
      margin-bottom: 0;
    }
  }
  .dragger-text {
    font-size: 14px;
    font-weight: bold;
    color: #333333;
  }
}
.t-upload {
  width: 100%;
}
/deep/ .t-upload__flow {
  min-width: 478px;
}
/deep/ .t-upload__flow-table {
  background: #ffffff;
}
/deep/ .t-upload__flow-table > tr > td {
  padding: 10px 5px;
}
/deep/ .t-upload__flow-bottom {
  display: none;
}
/deep/ .t-upload__flow-table > tr > th {
  border: none;
  padding: 10px 5px;
}
/deep/ .t-upload__flow-table {
  border: 1px solid #f0f0f0;
}
/deep/ .t-upload__flow-table > tr {
  border-color: #f0f0f0;
}
// /deep/ .t-upload__flow-button {
//   display: none;
// }
// /deep/ .t-upload__flow-table > tr > th:last-child {
//   display: none;
// }
</style>
